<template>
  <div class="link">
    <i class="iconfont link-icon" :class="'icon-' + type" :style="{ fontSize: size + 'px' }"></i>
    <span class="link-text">{{ text }}</span>
  </div>
</template>

<script>
export default {
  name: 'Link',
  props: {
    type: { // 图标类型
      type: String,
      required: true
    },
    size: { // 图标大小
      type: Number,
      default: 16
    },
    text: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="less">
.link {
  display: inline-block;
  cursor: pointer;
  color: #B6B6B6;
  font-size: 16px;

  &:hover {
    color:  #FBB03B;
  }
}
.link-icon {
  vertical-align: middle;

  &::before {
    transition: color .5s;
  }
}
.link-text {
  vertical-align: middle;
  margin-left: 8px;
  transition: color .5s;
}
</style>
